<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" th:href="@{css/base.css}">
  <link rel="stylesheet" th:href="@{css/login.css}">
  <link rel="stylesheet" th:href="@{layer/layer.css}">
  <script th:src="@{js/flexible.js}"></script>
  <script th:src="@{js/zepto/zepto.min.js}"></script>
  <script th:src="@{js/fastclick.js}"></script>
  <script th:src="@{layer/layer.js}"></script>
  <script th:src="@{js/base.js}"></script>
  <title>登录</title>
</head>
<body>
<div class="container">
  <a href="javascript:;" onclick="javascript:history.back(-1)" class="return">
    <img th:src="@{image/back.png}" alt="">
  </a>
  <div class="logo">
    <img th:src="@{image/logo_img.png}" alt="">
  </div>
  <div class="form_input">
    <div class="form_item">
      <div class="lable_icon">
        <img th:src="@{image/tel.png}" alt="">
      </div>
      <input type="tel" maxlength="11" placeholder="输入手机号" class="tel_input">
    </div>
    <div class="form_item" id="yanzh">
      <div class="lable_icon">
        <img th:src="@{image/pic.png}" alt="">
      </div>
      <input type="text" placeholder="输入图形码" class="pic_input">
      <div class="verification" onclick="getCheckcode()">
        <img th:src="@{kaptcha.jpg}" alt="">
      </div>
    </div>
    <div class="form_item">
      <div class="lable_icon">
        <img th:src="@{image/password.png}" alt="">
      </div>
      <input type="text" placeholder="输入短信验证码" class="psd_input">
      <input class="psd_btn" id="btnSendCode1" type="button" value="获取验证码"
             style="height: 100%;background: 0 0;text-align: center;padding: 0;outline: 0 none;border: 0 none;">
    </div>
  </div>
  <div class="submit">
    <img th:src="@{image/register_login.png}" alt="" onclick="binding()">
  </div>
</div>
</body>
<script th:src="@{js/base64/base64.min.js}"></script>
<script>
  FastClick.attach(document.body);//解决300ms点击延迟的问题iphone
  var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则
  var count = 60; //间隔函数，1秒执行
  var num;//设置用户点击验证码次数
  var InterValObj1; //timer变量，控制时间
  var curCount1;//当前剩余秒数
  var flag = false;//当为true时刷新验证码

  //当cookie里存的用户信息过期了就不显示图像验证码
  if (getCookie("userphone") == null) {
    $("#yanzh").removeClass("showcode")
  }
  //当cookie里存的计数num还没有过期时就显示图像验证码
  if (getCookie("num") >= 5) {
    $("#yanzh").addClass("showcode")
  }

  $("#btnSendCode1").on("click", function () {
    var userphone = getCookie("userphone");
    // 当用户没有点击过cookie里面没有时就设置次数为1
    if (userphone == null || userphone == undefined) {
      num = 1
    } else {
      if (num == null || num == undefined) {
        num = +getCookie("num") + 1;
      } else {
        num++
      }

    }
    //赋值完num存储
    setCookie("num", num, "0.25h")
    //如果num次数大于等于5是出现图像验证
    if (getCookie("num") >= 5) {
      $("#yanzh").addClass("showcode");

      if (getCookie("num") == 5) {
        return false;
      }
    }
    if (flag == true) {
      getCheckcode();
    }
    sendMessage1()
  })

  /*第一*/
  function sendMessage1() {
    curCount1 = count;
    var phone = $.trim($('.tel_input').val());
    if (!phoneReg.test(phone)) {
      layer.open({
        content: '请输入有效的手机号码'
        , skin: 'msg'
        , time: 2 //2秒后自动关闭
      });
      return false;
    }
    //处理次数num大于5的情况
    if (getCookie("num") > 5) {
      var pic_yanzh = $.trim($(".pic_input").val());
      if (pic_yanzh == "") {
        layer.open({
          content: '验证码不能为空'
          , skin: 'msg'
          , time: 2 //2秒后自动关闭
        });
        return false;
      }
      $.post("[[@{/checkCaptcha}]]", {picCaptcha: pic_yanzh}, function (res) {
        var result = JSON.parse(res);
        if (result.ret == "0") {
          //设置button效果，开始计时
          $("#btnSendCode1").attr("disabled", "true");
          $("#btnSendCode1").val(+curCount1 + "秒后再获取");
          InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
          //向后台发送处理数据
          $.post("[[@{/apiOauth/captcha}]]", {mobile: phone, type: 2}, function (res) {
            var data = JSON.parse(res);
            flag = true;
            if (data.ret == "0") {

            } else {
              layer.open({
                content: data.msg
                , skin: 'msg'
                , time: 2 //2秒后自动关闭
              });
            }
          })
        } else {
          layer.open({
            content: result.msg
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
        }
      })
    } else {
      //设置button效果，开始计时
      $("#btnSendCode1").attr("disabled", "true");
      $("#btnSendCode1").val(+curCount1 + "秒后再获取");
      InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
      //向后台发送处理数据
      $.post("[[@{/apiOauth/captcha}]]", {mobile: phone, type: 2}, function (res) {
        //不管成功失败只要请求我就存储在cookie里
        setCookie("userphone", phone, "0.25h")
        var data = JSON.parse(res);

        if (data.ret == "0") {

        } else {
          layer.open({
            content: data.msg
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
        }
      })
    }
    if (flag == true) {
      flag = false
      return false;
    }
  }

  function SetRemainTime1() {
    if (curCount1 == 1) {
      window.clearInterval(InterValObj1);//停止计时器
      $("#btnSendCode1").removeAttr("disabled");//启用按钮
      $("#btnSendCode1").val("重新发送");
    }
    else {
      curCount1--;
      $("#btnSendCode1").val(+curCount1 + "秒后再获取");
    }
  }

  /*提交*/
  function binding() {
    var load = layer.open({type: 2, shade: false});
    var phone = $.trim($('.tel_input').val());
    var yanzh = $.trim($('.psd_input').val());
    var shareId = GetRequest().shareId;
    $.post("[[@{/apiOauth/register}]]", {mobile: phone, captcha: yanzh}, function (res) {
      layer.close(load)
      var data = JSON.parse(res);
      if (data.ret == "0") {

        $.post("[[@{/sourceVideo/collect}]]", {shareId: shareId}, function (res) {
          var data = JSON.parse(res);

          if (data.ret == "0") {
            data.user.mobile = Base64.encode(data.user.mobile);
            window.location.href = "expot?shareId=" + data.user.mobile;
          } else {
            layer.open({
              content: "收藏失败，请重新登录"
              , skin: 'msg'
              , time: 2 //2秒后自动关闭
            });
          }
        })
      } else {
        layer.open({
          content: data.msg
          , skin: 'msg'
          , time: 2 //2秒后自动关闭
        });
      }

    })

  }

  function getCheckcode() {
    $(".verification img").attr("src", "[[@{kaptcha.jpg}]]")
  }
</script>
</html>